import React, { memo, useState } from 'react';
import { useDispatch,useSelector } from 'react-redux';
import {
  Card,
  Link,
  Input,
  Button,
  Switch,
  Message,
} from '@arco-design/web-react';
export default memo(function Work() {
  const dispatch = useDispatch();
  // 下班时间
  const isOff = useSelector(state => state.workTip)
  const [isOn, setIsOn] = useState(isOff);
  // 开启提示
  const [offWorkTime, setOffWorkTime] = useState();
  const onChange = value => {
    setIsOn(!isOn);
    dispatch({ type: 'workTip', data: value });
  };
  return (
    <Card title='work' extra={<Link>根据设置调整提示时间</Link>}>
      <Link>请输入下班时间</Link>
      <br />
      &nbsp;
      <span className=' iconfont icon-shangban' />
      &nbsp;
      <Input
        size='mini'
        placeholder='18'
        style={{ width: 50 }}
        onChange={e => {
          setOffWorkTime(e);
        }}
      />
      &nbsp;
      <Button
        size='mini'
        type='primary'
        onClick={e => {
          if (offWorkTime !== '') {
            console.log(offWorkTime);
            dispatch({
              type: 'offWorkTime',
              data: offWorkTime,
            });
            Message.success('提交成功!');
          } else {
            Message.warning('请输入完成字段');
          }
        }}
      >
        提交
      </Button>
      <br />
      <br />
      <Link>开启下班提示</Link>
      <Switch onChange={onChange} checked={isOn} size='small' />
    </Card>
  );
});
